<template>
  <el-card>
      <div  class="box">
        <img :src="userStore.avatar" alt="" class="avatar">
        <div class="bottom">
          <h3 class="title">{{getTime()}}好呀！{{ userStore.username }}</h3>
          <p class="subtitle">硅谷甄选运营平台</p>
        </div>
      </div>

  </el-card>
  <div class="bottom1">
    <svg-icon name="welcome" width="600px" height="300px"></svg-icon>
  </div>
</template>

<script lang="ts" setup>
import {getTime} from '@/utils/time.ts'
// 引入用户相关的仓库，获取当前用户的头像、昵称
import useUserStore from '@/store/modules/user'


// 获取存储用户信息的仓库对象
let userStore = useUserStore()

</script>

<style scoped langh="scss">
.box{
  display:flex;

  .avatar{
    width:100px;
    height:100px;
    border-radius:50%;
  }
  .bottom{
    margin-left:20px;
    .title{
      font-size:30px;
      font-weight:900;
      margin-bottom:30px;
    }
    .subtitle{
      font-style:italic;
      color:#ccc;
    }
  }
  
}
.bottom1{
  display:flex;
  justify-content:center ;
  margin-top:100px;
}
</style>